
<script setup>

const demo = [
  {
    name: "VitePress技术文档",
    description: "基于静态网站生成器VitePress生成的个人技术文档博客，提供一站式前端技术指南，提升工作效率",
    tags: ["VitePress", "Vue3", "Markdown"],
    link: "https://github.com/liang14658fox/liang14658fox.github.io/tree/master",
    pre: "https://liang14658fox.github.io/",
    href: '',
    // href: "/markdown/directory_1_template/items_1_frame/part_1_build/list_3_vitepress/018.搭建vitepress项目",
    img: "/vitepress.png",
  },
  {
    name: "Docusaurus博客",
    description: "基于 Docusaurus 生成的个人博客，提供React生态技术指导，也分享一些有趣的动态",
    tags: ["React", "Docuasurus", "Markdown"],
    link: "https://gitee.com/liang14658fox/docusaurus",
    pre: "https://liang14658fox.gitee.io/docusaurus/",
    href: "",
    img: "/博客.png",
  },
  {
    name: "微智慧官方网站",
    description: "青岛微智慧信息有限公司介绍网站",
    tags: ["jQuery", "ECMAScript"],
    link: "",
    pre: "https://www.zhihuiqd.com/index.html",
    href: "",
    img: "/微智慧官网.png",
  },
  {
    name: "青岛市教育局官方政务网站",
    description: "青岛市教育局移动端升级项目，于2023年底投入使用",
    tags: ["jQuery", "ES6模块化"],
    link: "",
    pre: "http://edu.qingdao.gov.cn/",
    href: "",
    img: "/青岛市教育局.png",
  },
  {
    name: "左纳乌制造机分析器",
    description: "《塞尔达传说：王国之泪》游玩辅助，在左纳乌能源核心有限的情况下自动分析资源获得的最优解",
    tags: ["JavaScript", "Element UI", "Vue.js"],
    link: "",
    pre: "",
    href: "",
    img: "/左纳乌.png",
  },
  {
    name: "基于Echarts的人物关系分析系统",
    description: "选择指定影视作品，通过Echarts关系图展现出作品中出现的人物角色、出演的演员阵容以及现实世界人际关系",
    tags: ["node.js", "Echarts", "Vue.js"],
    link: "",
    pre: "",
    href: "",
    img: "/人物关系.png",
  },
  {
    name: "基于Vue2的互动地图系统",
    description: "可互动的魔幻世界地图，可结合影视作品，根据时间线在地图上标识出人物、战役等内容",
    tags: ["JavaScript", "地图"],
    link: "",
    pre: "",
    href: "",
    img: "/地图.png",
  },
  {
    name: "基于Vue2的科技树系统",
    description: "适用于游戏、学习、建设与发展的可互动解锁升级科技树，灵感来自于 LOL s4赛季天赋树",
    tags: ["JavaScript", "SVG", "数据结构", "Vue.js"],
    link: "",
    pre: "",
    href: "",
    img: "/科技树.png",
  },
  {
    name: "屏幕分辨率可视化工具",
    description: "分辨率可视化对比网站，可带入自定义比例分辨率",
    tags: ["HTML", "CSS3", "Vue.js"],
    link: "",
    pre: "",
    href: "",
    img: "/分辨率.png",
  },
  {
    name: "基于Vue2的个人分期理财系统",
    description: "对分期扣款记录进行分析，可自动计算出所有周期的当日余额与扣款情况",
    tags: ["JavaScript", "Element UI", "Vue.js"],
    link: "",
    pre: "",
    href: "",
    img: "/分期理财.png",
  },
  {
    name: "参数横向对比可视化工具",
    description: "自定义机型参数比较，灵感来自于苹果官网和性能天梯排行榜",
    tags: ["vue3", "ECharts", "node.js"],
    link: "",
    pre: "",
    href: "",
    img: "/对比.png",
  }, {
    name: "期待事项清单小工具",
    description: "记录待办事项的小工具demo",
    tags: ["vue2", "ECharts", "ES6+"],
    link: "",
    pre: "",
    href: "",
    img: "/期待事项.png",
  }, {
    name: "观影记录",
    description: "可以记录观影信息的可视化系统",
    tags: ["vue2", "DOM BOM", "ES6+"],
    link: "",
    pre: "",
    href: "",
    img: "/观影记录.png",
  },
];

const online = []
// import config from '../docs/.vitepress/config'
// import {autoGetSidebarOptionBySrcDir} from "../docs/.vitepress/sidebar";
// const path = require("path");

console.log('hello！！！！！')

</script>

<template>
  <div class="container">
    <div class="title">个人作品</div>
    <div class="desc">
      分享个人编写的部分开源前端项目和实用工具，包含项目在线地址、部分开源地址和教程，开源项目可以任意取用(禁止用于学术不端等途径)，
      欢迎大家为作者寻找项目问题和提出PR，任何问题请联系作者
      <a href="mailto:liang14658fox@outlook.com">liang14658fox@outlook.com</a>
    </div>
    <div class="list">
      <div class="card" v-for="item in demo" :key="item.name">
        <div class="img-pic">
          <div class="img-shadow">
            <div class="card-desc">{{ item.description }}</div>
          </div>
          <img :src="item.img" :alt="item.name" style="" />
        </div>
        <div class="card-word">
          <div class="card-name">{{ item.name }}</div>
          <div class="card-tag">
            <div v-for="tag in item.tags" :key="tag" class="card-tag-item">
              {{ tag }}
            </div>
          </div>
          <div class="card-footer">
            <img src="/github.png" alt="" class="card-footer-img" />
            <a :href="item.link" v-if="item.link" class="card-footer-word has">Git地址</a>
            <div v-else class="card-footer-word">暂无</div>
            <img src="/online.png" alt="" class="card-footer-img" />
            <a :href="item.pre" v-if="item.pre" class="card-footer-word has">在线预览</a>
            <div v-else class="card-footer-word">暂无</div>
          </div>
        </div>
      </div>
    </div>

    <div class="title divide">一起开源</div>
    <div class="desc">
      和作者一起参与开源项目实践，充实你的简历，包括但不限于项目学习，日常开源DEMO编写，参与各类开发竞赛，字学计划，开源之夏，开源社区，以及日常项目外包等，任何问题请联系作者
        <a href="mailto:liang14658fox@outlook.com">liang14658fox@outlook.com</a>
    </div>
    <div class="list">
      <div class="card" v-for="item in online" :key="item.name">
        <div class="img-pic">
          <div class="img-shadow">
            <div class="card-desc">{{ item.description }}</div>
          </div>
          <img :src="item.img" :alt="item.name" />
        </div>
        <div class="card-word">
          <div class="card-name">{{ item.name }}</div>

          <div class="card-tag">
            <div v-for="tag in item.tags" :key="tag" class="card-tag-item">
              {{ tag }}
            </div>
          </div>
          <div class="card-footer">
            <img src="/text.png" alt="" class="card-footer-img" />

            <a :href="item.href" v-if="item.href" class="card-footer-word has">文档</a>
            <div v-else class="card-footer-word">暂无</div>

            <img src="/github.png" alt="" class="card-footer-img" />

            <a :href="item.link" v-if="item.link" class="card-footer-word has">Git</a>
            <div v-else class="card-footer-word">暂无</div>

            <img src="/online.png" alt="" class="card-footer-img" />

            <a :href="item.pre" v-if="item.pre" class="card-footer-word has">预览</a>
            <div v-else class="card-footer-word">暂无</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.divide {
  margin-top: 64px;
}

.desc {
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  margin-bottom: 48px;

  a {
    color: var(--vp-c-brand);
  }
}

.title {
  display: flex;
  flex-flow: row;
  justify-content: center;
  line-height: 60px;
  width: 100%;
  font-size: 48px;
  font-weight: 300;
  margin-bottom: 24px;
}

.img-pic {
  position: relative;

  &:hover .img-shadow {
    opacity: 1;
    transition: all 0.5s;
  }
}

.img-shadow {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding: 10%;
}

.container {
  max-width: 1440px;
  margin: 24px auto;
  padding: 48px;

  @media (max-width: 1280px) {
    padding: 36px;
  }

  @media (max-width: 1080px) {
    padding: 24px;
  }

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 48px;

  @media (max-width: 1280px) {
    grid-gap: 36px;
  }

  @media (max-width: 1080px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 768px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

.has:hover {
  color: var(--vp-c-brand);
}

.card {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  background-color: var(--vp-c-bg-soft);
  transition: all 0.3s;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

  &:hover {
    box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.12);
    transition: all 0.3s;
  }

  &-footer {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 24px;

    &-img {
      width: 20px;
      margin-right: 12px;
    }

    &-word {
      margin-right: 16px;
    }
  }

  &-word {
    padding: 24px 36px 36px;
    display: flex;
    flex-flow: column;
  }

  &-name {
    font-size: 24px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 超出部分省略号 */
    word-break: break-all;
    /* break-all(允许在单词内换行。) */
    display: -webkit-box;
    /* 对象作为伸缩盒子模型显示 */
    -webkit-box-orient: vertical;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-line-clamp: 1;
    /* 显示的行数 */
  }

  &-desc {
    margin-top: 16px;
    font-size: 18px;
    color: white;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 超出部分省略号 */
    word-break: break-all;
    /* break-all(允许在单词内换行。) */
    display: -webkit-box;
    /* 对象作为伸缩盒子模型显示 */
    -webkit-box-orient: vertical;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-line-clamp: 3;
    /* 显示的行数 */
  }

  &-tag {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    &-item {
      cursor: pointer;
      margin-top: 16px;
      padding: 2px 12px;
      background: var(--vp-c-brand);
      margin-right: 12px;
      font-size: 14px;
      color: white;
      border-radius: 12px;
    }
  }
}
</style>